<template>
    <div>
        <Row style="margin:5px 0px 10px 5px">
            
            <i-col span="4" offset="4">
                <chart-pie style="height: 300px;" :value="cpu_data" text="集群CPU概况"></chart-pie >
            </i-col>
            <i-col span="4" offset="4">
                <chart-pie style="height: 300px;" :value="memory_data" text="集群内存概况"></chart-pie >
            </i-col>
        </Row>
        <h3>可调度节点(worker)</h3>
        <i-table  :loading="loading" :columns="format" :data="scheduleData"></i-table >
        <br>


        <h3>不可调度节点(master)</h3>
        <i-table  :loading="loading"  :columns="format" :data="unscheduleData"></i-table >

        <br>

    </div>

</template>

<script>

import store from '@/store'
import { get_cluster_stats } from  '@/api'
import { k8s_cluster_post } from '@/api/http'
import chartPie  from '@/lib/pie'

export default {
    name:'clusterStat',
    components: {
        chartPie,
    },


    data() {
        return {
            loading: true,
            sharedState: store.state,
            format: [
                {
                    title: 'cpu使用/总量',align:'center',
                    render: (h,params) => {
                        let cpu_total= (params.row.cpu_total/1000).toFixed(1)
                        let cpu_usage  = (params.row.cpu_usage/1000).toFixed(1)
                        let value = cpu_usage+"c/"+cpu_total+"c"
                        return h('p',value)
                    }
                },
                {
                    title: 'cpu使用率',
                     render: (h,params) => {
                        let cpu_total= params.row.cpu_total
                        let cpu_usage  = params.row.cpu_usage

                        let value = (cpu_usage/cpu_total*100).toFixed(1)
                        if (value > 50 && value < 80){
                            return  h('i-progress',{ props:{percent: parseFloat(value),'stroke-width': 15,'status':'active'}}, value+'%');
                        } else if (value >= 80){
                            return  h('i-progress',{ props:{percent: parseFloat(value),'stroke-width': 15,'status':'wrong'}}, value+'%');
                        } else {
                            return  h('i-progress',{ props:{percent: parseFloat(value),'stroke-width': 15,'status':'success'}}, value+'%');
                        }
                    }

                },
                {
                    title: '内存使用/总量',align:'center',
                    render: (h,params) => {
                        let memory_total= (params.row.memory_total/1024).toFixed(1)
                        let memory_usage  = (params.row.memory_usage/1024).toFixed(1)
                        let value = memory_usage+"G/"+memory_total+"G"
                        return h('p',value)
                    }
                },
                {
                    title: '内存使用率',
                    render: (h, params) => {
                        let memory_total= params.row.memory_total
                        let memory_usage  = params.row.memory_usage

                        let value = (memory_usage/memory_total*100).toFixed(1)
                        if (value > 50 && value < 80){
                            return  h('i-progress',{ props:{percent: parseFloat(value),'stroke-width': 15,'status':'active'}}, value+'%');
                        } else if (value >= 80){
                            return  h('i-progress',{ props:{percent: parseFloat(value),'stroke-width': 15,'status':'wrong'}}, value+'%');
                        } else {
                            return  h('i-progress',{ props:{percent: parseFloat(value),'stroke-width': 15,'status':'success'}}, value+'%');
                        }
                    }
                },
                {
                    title: 'POD容量',key: 'pod_total',align:'center',
                    render: (h,params) => {
                        let value = params.row.pod_total+ '个'
                        return h('p',value)
                    }
                },
                {
                    title: '磁盘容量',key: 'disk',align:'center',
                    render: (h,params) => {
                        let value = params.row.disk+ 'G'
                        return h('p',value)
                    }
                },
            ],
            scheduleData: [],
            allData: [],
            unscheduleData: [],
            cpu_data:[],
            memory_data:[],
        }
    },
    methods: {

        add_chart(data) {
            let cluster_data = data[0]
            let cpu_total = cluster_data.cpu_total
            let cpu_usage = cluster_data.cpu_usage
            let cpu_usage_percent = parseFloat((cpu_usage/cpu_total*100).toFixed(1))

            let cpu_available_percent = 100 -cpu_usage_percent

            let memory_total = cluster_data.memory_total
            let memory_usage = cluster_data.memory_usage

            let memory_usage_percent = parseFloat((memory_usage/memory_total*100).toFixed(1))
            let memory_available_percent = 100 -memory_usage_percent

            this.cpu_data = [
                {name:'使用', value: cpu_usage_percent},
                {name:'剩余', value: cpu_available_percent},
            ]
            this.memory_data = [
                {name:'使用', value: memory_usage_percent},
                {name:'剩余', value: memory_available_percent},
            ]

        },
        refresh(){
            let that = this
            let data1= {"stat_type":'schedule'}
            k8s_cluster_post(get_cluster_stats,data1,{},15000).then(response=>{
                let schedule_data = response.data
                that.scheduleData = schedule_data
                if(schedule_data){
                    that.add_chart(schedule_data)
                }
            })

            let data3 = {"stat_type":'unschedule'}
            k8s_cluster_post(get_cluster_stats,data3,{},15000).then(response=>{
                let unschedule_data = response.data
                that.unscheduleData = unschedule_data
            })
            that.loading=false

        },


    },
    mounted: function(){
        this.refresh() 
    }

}
</script>

<style scoped>

</style>